<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<!--内容-->
		<div class="mui-content" style="align-content: center;" id="setting">
		</div>
		
		<!--HTML模板-->
		<script id="setting-template" type="text/html">
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header mui-card-media">
					<img src="./images/logo.png" style="width:20%;height:auto;margin-left:10px;margin-right:20px;"/>
					<div class="mui-media-body" style="padding:8px;">
						<h3>{{item.nickname}}</h3>
						<p>{{item.introduction}}</p>
					</div>
				</div>
				<!--内容区-->
				<div class="mui-card-content" style="padding:10px">
					<ul class="mui-table-view">
					    <li class="mui-table-view-cell">
					    	<a class="mui-navigate-right" id="personal_M">个人病例</a>
					    </li>
					    <li class="mui-table-view-cell">
					    	<a class="mui-navigate-right" id="mainDr">主治医生</a>
					    </li>
					    <li class="mui-table-view-cell">
					    	<a class="mui-navigate-right">我的关注</a>
					    </li>
					    <li class="mui-table-view-cell">
					    	<a class="mui-navigate-right" id="setting_C">设置</a>
					    </li>
					    <li class="mui-table-view-cell" id="signout">
					    	<a class="mui-navigate-right">退出登录</a>
					    </li>
					</ul>
				</div>
			</div>	
		</script>
		
		<script src="js/mui.min.js"></script>
		<script src="js/template-web.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			
			// 渲染页面
			// 从本地取出用户数据
			var data = app.getState();
			if (JSON.stringify(data) == '{}'){
				// 用户未登录
				data = {
					'nickname':'您还未登录',
					'introduction' : '查看或编辑个人资料'
				}
			}
			// 根据模板将数据渲染成 HTML
			var html = template('setting-template', {'item':data});
			// 将 HTML 插入到列表后
			settingElement = document.getElementById('setting');
			settingElement.innerHTML = html;
			
				    	
	     	// 监听滑动事件
//	     	var changeTab = function(curTab, targetTab, targetTabTitle){
//	      		var curWebview = plus.webview.currentWebview();		     		
//	      		var targetWebview = plus.webview.getWebviewById(targetTab);
//	      		targetWebview.show();
//	      		curWebview.hide();
//				// 获取当前页面的父页面（创建它的页面）
//				var index = curWebview.opener();
//	      		// 在父页面执行JS，激活父页面中对应选择卡，修改标题
//				index.evalJS("document.getElementById('setting.html').classList.remove('mui-active');document.getElementById('chat.html').classList.add('mui-active');document.getElementById('title').innerHTML='" + targetTabTitle + "';");
//	     	};
	      	document.querySelector('body').addEventListener('swiperight',function(e){
	      		if ( JSON.stringify(app.getState()) == '{}' ){
	      			changeTab('setting.html','login.html','登录');
	      		}
	      		else{
	      			changeTab('setting.html','chat.html','交流');
	      		}
	      	});
	      	
	      	// 监听退出登录事件
	      	document.getElementById('signout').addEventListener('tap',function(){
	      		if ( JSON.stringify(app.getState()) == '{}' ){
	      			mui.toast('您已处于离线状态！');
	      		}
	      		else{
	      			// 清除用户数据
		      		app.setState(null);
		      		// 刷新用户聊天列表
					var chatWebview = plus.webview.getWebviewById('chat.html');
					chatWebview.evalJS('refreshChatList()');
		      		mui.toast('退出登录成功');	
	      		}
	      		location.reload();
	      	});
	      	
	      	mui.plusReady(function(){
	      		// 监听页面显示事件
	            var self = plus.webview.currentWebview();
	            self.addEventListener('show',function(){
	            	location.reload();
	            });
	            document.getElementById('personal_M').addEventListener('tap',function(){
	            	mui.openWindow({
	            		url:'clinic_history.html',
	            		id:'clinic_history.html'
	            	});
	            });
	            document.getElementById('mainDr').addEventListener('tap',function(){
	            	mui.openWindow({
	            		url:'mainDr.html',
	            		id:'mainDr.html'
	            	});
	            });
	             document.getElementById('setting_C').addEventListener('tap',function(){
	            	mui.openWindow({
	            		url:'setting_choose.html',
	            		id:'setting_choose.html'
	            	});
	            });
	      	});
		</script>
	</body>

</html>